<template>
    <el-dialog
            v-model="dialog.visible"
            :title="dialog.title"
            :before-close="closeDialog"
    >
        <div class="zc-dbms-step">
            <el-steps :active="dialog.active" align-center>
                <el-step title="数据源设置"/>
                <el-step title="模型映射"/>
                <el-step title="确认"/>
            </el-steps>
        </div>
        <DbmsOne ref="dbmsOneRef" @submit="onOneSubmit" v-if="dialog.active===1"></DbmsOne>
        <DbmsTwo ref="dbmsTwoRef" @submit="onTwoSubmit" v-if="dialog.active===2 && dialog.id" :id="dialog.id"></DbmsTwo>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog.visible = false">取消</el-button>
                <el-button type="primary" @click="doNextStep()">下一步</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup type="ts">
import '@/assets/app.css'
import DbmsOne from '@/views/pages/design/dbms/one.vue'
import DbmsTwo from '@/views/pages/design/dbms/two.vue'
import {reactive, ref} from "vue";
import {DictionaryStore} from "@/stores/dictionary";

const dictionaryStore = DictionaryStore();
const dbmsOneRef = ref();


const dialog = reactive({
    visible: false,
    title: '创建数据源',
    id: '',
    active: 1
})

const openDialog = () => {
    dialog.visible = true;
    dictionaryStore.lodeEnv();
    dictionaryStore.lodeSyncMode();
    dictionaryStore.lodeDbSource();
    dictionaryStore.lodeDbType();
}

const closeDialog = () => {
    dialog.visible = false;
}

const onOneSubmit = (id) => {
    dialog.id = id;
    if (id) {
        dialog.active = 2;
    }
}

const onTwoSubmit = () => {

}

const doNextStep = () => {
    dbmsOneRef.value.doSubmit();
}

const exposed = {
    openDialog
};
defineExpose(exposed);
</script>
